import "package:flutter/material.dart";

class ListenerPage extends StatefulWidget {
  const ListenerPage({super.key});
  @override
  State<StatefulWidget> createState() {
    return ListenerPageState();
  }
}

class ListenerPageState extends State<ListenerPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ListenPage'),
      ),
      body: const Center(
        // child: ListenerBox(), //事件监听
        // child: GestureDetectorBox(), //手势识别
        // child: MoveBox(), //拖动
        child: ScaleBox(), //缩放
      ),
    );
  }
}

class ListenerBox extends StatefulWidget {
  const ListenerBox({super.key});
  @override
  State<StatefulWidget> createState() {
    return _ListenerBoxState();
  }
}

class _ListenerBoxState extends State<ListenerBox> {
  PointerEvent? _event;
  @override
  Widget build(BuildContext context) {
    return Listener(
      child: Container(
        alignment: Alignment.center,
        width: 300,
        height: 200,
        decoration: const BoxDecoration(color: Color(0xff409eff)),
        child: Text(
          "${_event?.localPosition ?? ''}",
          style: const TextStyle(color: Colors.white),
        ),
      ),
      onPointerDown: (PointerDownEvent event) {
        setState(() {
          _event = event;
        });
      },
      onPointerMove: (PointerMoveEvent event) {
        setState(() {
          _event = event;
        });
      },
      onPointerUp: (PointerUpEvent event) {
        setState(() {
          _event = event;
        });
      },
    );
  }
}

class GestureDetectorBox extends StatefulWidget {
  const GestureDetectorBox({super.key});
  @override
  State<StatefulWidget> createState() {
    return _GestureDetectorBoxState();
  }
}

class _GestureDetectorBoxState extends State<GestureDetectorBox> {
  String _operation = "None Gesture detected"; //当前事件名
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GestureDetector(
      child: Container(
        alignment: Alignment.center,
        width: 300,
        height: 200,
        decoration: const BoxDecoration(color: Color(0xff409eff)),
        child: Text(
          _operation,
          style: const TextStyle(color: Colors.white),
        ),
      ),
      onTap: () {
        // 当同时监听Tap和DoubleTap，Tap会有200ms触发延迟，用于判断是否为双击，只监听Tap不会有延迟
        setState(() {
          _operation = 'Tap'; //触摸
        });
      },
      onDoubleTap: () {
        setState(() {
          _operation = 'DoubleTap'; //双击
        });
      },
      onLongPress: () {
        setState(() {
          _operation = 'LongPress'; //长按
        });
      },
    );
  }
}

class MoveBox extends StatefulWidget {
  const MoveBox({super.key});
  @override
  State<StatefulWidget> createState() {
    return _MoveBoxState();
  }
}

class _MoveBoxState extends State<MoveBox> with SingleTickerProviderStateMixin {
  double _top = 10.0; //元素上偏移
  double _left = 0.0; //元素左偏移
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
            top: _top,
            left: _left,
            child: GestureDetector(
              child: Container(
                width: 100,
                height: 100,
                decoration: const BoxDecoration(color: Color(0xff409eff)),
                child: Text(
                  "[$_left, $_top]",
                  style: const TextStyle(color: Colors.white),
                ),
              ),
              onPanStart: (DragStartDetails event) {
                // 开始拖拽
                // print('开始拖拽');
              },
              onPanUpdate: (DragUpdateDetails event) {
                // 拖拽中
                setState(() {
                  // 只修改_left 或 _top是单方向移动
                  _left += event.delta.dx; //delta 指本次滑动偏移量
                  _top += event.delta.dy;
                  // print('拖拽中[$_left, $_top]');
                });
              },
              onPanEnd: (DragEndDetails event) {
                // 拖拽结束
                // print('拖拽结束');
              },
            )),
      ],
    );
  }
}

class ScaleBox extends StatefulWidget {
  const ScaleBox({super.key});
  @override
  State<StatefulWidget> createState() {
    return _ScaleBoxState();
  }
}

class _ScaleBoxState extends State<ScaleBox> {
  double _width = 200;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Image.asset(
        "./images/1.jpg",
        width: _width,
      ),
      onScaleUpdate: (ScaleUpdateDetails event) {
        setState(() {
          _width = 200 * event.scale.clamp(0.8, 10); //限制最小0.8，最大10
        });
      },
    );
  }
}
